﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<style type="text/css">
	    .redBorder{
	    border:2px solid red;
	    }
		.test1{
		width:240px;
		height:150px;
		background-color:#3493B9;
		text-align:center;
		padding:3px 0px;
		}
		.test2{
		width:160px;
		height:100px;
		background-color:#47BAE7;
		text-align:center;
		line-height:20px;
		margin:10px auto;
		}
		span{
		width:100px;
		height:35px;
		background-color:#fff;
		padding:20px 20px 20px 20px;
		}
		body{
		font-size:12px;
		}
	</style>

<title>展示事件冒泡</title>
<script type="text/javascript" src="JS/jquery-3.5.1.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
	    $(".test1").mouseover(function(event){
		    $(".test1").addClass("redBorder");
		    //event.stopPropagation();     //阻止事件冒泡
	    });
	    $(".test1").mouseout(function(event){
		    $(".test1").removeClass("redBorder");
	    });
	    $(".test2").mouseover(function(event){
		    $(".test2").addClass("redBorder");
		    //event.stopPropagation();    //阻止事件冒泡
	    });
	    $(".test2").mouseout(function(event){
		    $(".test2").removeClass("redBorder");
	    });
	    $("span").mouseover(function(event){
		    $("span").addClass("redBorder");
		    //event.stopPropagation();    //阻止事件冒泡
	    });
	    $("span").mouseout(function(event){
		    $("span").removeClass("redBorder");
	    }); 

	});
	</script>
</head>
<body>
<div class="test1"> 
	<b>div元素</b>
	<p class="test2">
		<b>p元素</b><br/><br/>
		<span><b>span元素</b></span>
	</p>
</div>
</body>
</html>
